<template>
	<statusBarVue :title="pageTitle" :isShowBar="true" :isShowLeft="true" />
	<view class="enterprise-detail" :style="pageHaveBarStyle">
		<image class="bgimg" src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/7b93a5ce-d7a4-4600-8a86-defb0259741f.jpg" mode=""></image>
		<view class="company-info">
			<image class="logo-img" src="" mode=""></image>
			<view class="company-text">
				<view class="tit">
					维特联科技
				</view>
				<view class="rate">
					<uni-rate :readonly="true" :value="4" size="19" />
					<text class="rate-num">4.3</text>
				</view>
			</view>
		</view>
		<view class="tab-area">
			<view class="tab-head">
				<view v-for="(v,i) in articleTabs" :key="'articleTabs-'+ i" class="tab-head-text"
					:class="current === i ? 'active': '' " @click="current = i">
					{{v}}
				</view>
			</view>
			<view class="tab-content">
				<view v-if="current === 0">
					<view class="group">
						<view class="tit">
							公司介绍
						</view>
						<view class="con">
							成都建特联科技作为水电数字化解决方富顿导者，致力于成为喜户业务创新、数字化转型最可信赖的合作伙伴，物联网，大数据，人工智能，云计算，区块等。
						</view>
					</view>
					<view class="group">
						<view class="tit">
							业务范围
						</view>
						<view class="con">
							成都礁特联科技站终以客户需求为导向，提供场最化解决方案，克持水多水女水利，直联网、制造等古行古业教字化型实践产扇和解决方案广泛应用于全国各地各个地方，在敬李经济新时代，坚持以技术创新为发用引，践行“看朗+"目前研发人员占比超过60%，专利电调总量超过20多样，其作为敬字化解决方案领导者屹立于数李经济时代的企业厚量，面向未来，继特联将以推动教字经济发展为目标，与广大客户和合作伙伴一道，共同创造人人说事的美好生活，
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';
	import {
		publics
	} from '@/mixins/publics.js';
	export default {
		mixins: [publics],
		components: {
			statusBarVue
		},
		data() {
			return {
				pageTitle: '企业详情',
				type: '',
				current: 0,
				articleTabs: [
					'基本信息',
					'技术能力',
					'资质认证',
					'产品介绍',
				],
				articleList: []
			}
		},
		onShareAppMessage(){
			// 监听用户右上角的转发
		},
		onShareTimeline(){
			// 监听用户右上角的分享到朋友圈
		},
	}
</script>

<style lang="scss">
	.enterprise-detail {
		width: 100%;
		position: relative;
		z-index: 99;
		background-color: #F2F3F7;

		.bgimg {
			width: 100%;
			height: 292rpx;
		}

		.company-info {
			display: flex;
			margin: 0 40rpx;
			margin-top: -74rpx;
			z-index: 1;
			position: relative;
			margin-bottom: 50rpx;

			.logo-img {
				width: 132rpx;
				height: 132rpx;
				background: #FFFFFF;
				border: 2rpx solid #DBDBDB;
				border-radius: 16rpx;
			}

			.company-text {
				margin-left: 26rpx;

				.tit {
					height: 56rpx;
					font-family: PingFangSC-Semibold;
					font-weight: 600;
					font-size: 40rpx;
					color: #FFFFFF;
					margin-bottom: 32rpx;
				}

				.rate {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: PingFangSC-Semibold;
					font-weight: 600;
					font-size: 28rpx;
					color: #9296A1;

					.rate-num {
						margin-left: 10rpx;
					}
				}
			}
		}

		.tab-area {

			.tab-head {
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 38.06rpx;
				padding-right: 49.94rpx;
				padding-top: 64px;
				margin-top: -64px;

				.tab-head-text {
					height: 38rpx;
					font-family: PingFangSC-Semibold;
					font-weight: 600;
					font-size: 27.2rpx;
					color: #50585F;

					&.active {
						height: 44rpx;
						font-family: PingFangSC-Semibold;
						font-weight: 600;
						font-size: 32rpx;
						color: #1E1F23;
						position: relative;
						z-index: 22;

						&::after {
							content: " ";
							display: inline-block;
							width: 80%;
							height: 8rpx;
							border-radius: 18rpx;
							background-color: #22A366;
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0px;
							z-index: 1;
							margin: auto;
						}
					}
				}
			}

			.tab-content {
				padding: 0 20rpx;
				
				.group {
					width: 100%;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 26rpx 24rpx;
					box-sizing: border-box;
					margin-top: 20rpx;
					
					.tit {
						width: 100%;
						height: 40rpx;
						font-family: PingFangSC-Semibold;
						font-weight: 600;
						font-size: 28rpx;
						color: #1E1F23;
						margin-left: 8rpx;

						&::before {
							content: " ";
							display: inline-block;
							width: 6rpx;
							height: 28rpx;
							background: #22A366;
							border-radius: 4rpx;
						}
					}

					.con {
						margin-top: 4rpx;
						font-family: PingFangSC-Regular;
						font-weight: 400;
						font-size: 24rpx;
						color: #696969;
						text-indent: 2em;  
					}
				}
			}
		}
	}
</style>